<template>
  <div class="container">
    <header>
      <h1>今天吃什么?</h1>
      <button class="edit-btn" @click="showEditModal = true">
        编辑菜单
      </button>
    </header>

    <main>
      <div class="lottery-area" :class="{ active: isRolling }">
        <transition name="fade">
          <div v-if="!isRolling" class="result">{{ currentDish || '点击开始' }}</div>
          <div v-else class="rolling-text">
            <span v-for="dish in rollingDishes" :key="dish">{{ dish }}</span>
          </div>
        </transition>
      </div>

      <div class="actions">
        <button class="primary-btn" @click="startRoll" :disabled="isRolling">
          {{ currentDish ? '换一个' : '开始' }}
        </button>
      </div>
    </main>

    <!-- 编辑菜单弹窗 -->
    <EditModal 
      v-if="showEditModal"
      :dishes="dishes"
      @close="showEditModal = false"
      @update="updateDishes"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import EditModal from './components/EditModal.vue'

const dishes = ref([])
const currentDish = ref('')
const isRolling = ref(false)
const showEditModal = ref(false)
const rollingDishes = ref([])

// 初始化数据
onMounted(async () => {
  dishes.value = await window.db.getDishes()
})

// 开始抽取
const startRoll = () => {
  if (isRolling.value) return
  
  isRolling.value = true
  rollingDishes.value = dishes.value
  
  // 随机滚动效果
  let count = 0
  const timer = setInterval(() => {
    currentDish.value = dishes.value[Math.floor(Math.random() * dishes.value.length)]
    count++
    
    if (count > 20) {
      clearInterval(timer)
      isRolling.value = false
    }
  }, 100)
}

// 更新菜品列表
const updateDishes = async (newDishes) => {
  dishes.value = newDishes
  await window.db.saveDishes(newDishes)
}
</script>

<style>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.lottery-area {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  margin: 40px 0;
  border-radius: 8px;
  background: #f5f5f5;
}

.rolling-text span {
  display: block;
  animation: roll 0.1s infinite;
}

@keyframes roll {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

.actions {
  margin-top: 20px;
}

.primary-btn {
  padding: 12px 24px;
  font-size: 1.2em;
  border-radius: 4px;
  background: #ff6b6b;
  color: white;
  border: none;
  cursor: pointer;
}

.primary-btn:hover {
  background: #ff5252;
}

.edit-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  border-radius: 4px;
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
</style> 